
// 定义携带参数
let query = {
  advimgdesc: '',
  advimgpos: '',
  page: 1,
  limit: 10
}
// 隐藏
let flag = true
$('#hide').click(() => {
  flag ? $('#search').slideUp() : $('#search').slideDown()
  $('#hide')[0].className = flag ? "iconfont icon-xiajiantou" : "iconfont icon-shangjiantou"
  flag = !flag
})

// 渲染下拉框
getList()
async function getList() {
  const { data: { data } } = await axios.get('/ydd_advpos/all')
  // console.log(data);
  const str = '<option value="">请选择广告位</option>' + data.map(({ id, advposname }) => `
    <option value=${id}>${advposname}</option>
 `).join('')
  $('.select').html(str)
}

// 获取页面信息
const list = document.querySelector('#list')
reader()
async function reader() {
  const { data: { data: { data, count } } } = await axios.get('/ydd_advimg/list', { params: query })
  // console.log(res);
  renderPage(count)
  list.innerHTML = data.map(({ id, advposname, advimgpos, advimgsrc, advimgdesc, advimglink }, index) => `
   <tr>
            <th><input type="checkbox" class="smChecked"></th>
                <td>${index + 1}</td>
                <td name="one">${advposname}</td>
                <td name="two">${advimgdesc}</td>
                <td name="three"><img src=http://124.223.14.236:8060/${advimgsrc} alt=""></td>
                <td name="four">${advimglink}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs btn_edit iconfont icon-xiugai edit" data-id=${id}></button>
                  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete iconfont icon-shanchu del" data-id=${id}></button>
                </td>
              </tr>
   `).join('')

}

// 点击刷新，重新获取数据
document.querySelector('#flushed').addEventListener('click', function () {
  document.querySelector('.flushed').click()
})






// 修改模态框
const reviseForm = `   
<form id="reviseForm" class="layui-form">
<!-- 隐藏行 id  -->
<div class="layui-form-item layui-hide">
  <label class="layui-form-label">*id</label>
  <div class="layui-input-block">
    <input type="text" name="id" required lay-verify="required" placeholder="请输入广告图链接" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">*广告位</label>
  <div class="layui-input-block">
  <select class="select" name="advimgpos" style="display: block;">
  <option value="">请选择广告位</option>
</select>
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*广告图描述</label>
  <div class="layui-input-block">
  <textarea name="advimgdesc" placeholder="请输入广告图描述" lay-verify="required" class="layui-textarea"></textarea>
  </div>
</div>
<!-- 第三行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*广告图链接</label>
  <div class="layui-input-block">
    <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入广告图链接" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第四行 分类别名  -->
<div class="layui-form-item addImg">
  <label class="layui-form-label">*链接图片</label>
  <div class="layui-input-block">
  <label id="files">点击上传</label>
  <input type="file" id="file" style="display: none;">
  </div>
  <div class="layui-input-block" id=seeImg>
  <img src="" alt="" id="advimgsrc">
  <a href="javaScript:;">查看详情</a>
  </div>
</div>
<!-- 第五行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block-end">
  <i class="layui-btn layui-btn-primary" id="cancel1">取消</i>
    <button class="layui-btn" lay-submit lay-filter="formDemo" id='enter'>确认</button>
  </div>
</div>
</form>
`
// 删除
let indexReviseForm      //修改文章的弹出层的index
list.addEventListener('click', async function (e) {
  if (e.target.className === 'layui-btn layui-btn-danger layui-btn-xs btn_delete iconfont icon-shanchu del') {
    // console.log(55);
    // 获取删除的元素id
    const { id } = e.target.dataset
    // console.log(id);
    //!优化删除当页最后一个内容的bug
    if ($('.del').length === 1) query.page = query.page - 1
    if (query.page <= 1) query.page = 1
    const { data: { errmsg, errno } } = await axios.get(`/ydd_advimg/del?id=${id}`)
    // console.log(res);
    if (errno === 1000) return layer.msg(errmsg);
    layer.msg('删除成功');
    reader()
  }

  //点击修改弹框
  if (e.target.className === 'layui-btn layui-btn-xs btn_edit iconfont icon-xiugai edit') {
    // console.log(55);
    const { id } = e.target.dataset
    // console.log(id);
    indexReviseForm = layer.open({
      type: 1,
      title: ['客官要修改什么呢', 'font-size:22px;'],
      shade: 0.6, // 遮罩透明度
      content: reviseForm,
      area: ['800px', '500px']
    });
    getList()
    //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
    const { data: { data } } = await axios.get(`/ydd_advimg/rowInfo?id=${id}`)
    // console.log(data);
    const names = document.querySelectorAll('#reviseForm [name]')
    // console.log(names);
    // 基本回显
    names.forEach(ele => {
      ele.value = data[ele.name]
    })
    // 下拉框回显
    document.querySelector('.select').value = data.advimgpos
    // 图片回显
    document.querySelector('#advimgsrc').src = `http://124.223.14.236:8060/${data.advimgsrc}`
  }
})

document.body.addEventListener('change', function (e) {
  // 上传图片预览效果
  if (e.target.id === 'file') {
    // console.log(55);
    const files = document.querySelector('#file').files[0]
    // console.log(files);
    if (!files) return
    $('#seeImg').show()
    const imgUrl = URL.createObjectURL(files)
    document.querySelector('#advimgsrc').src = imgUrl
  }
})

//点击修改发送请求
$('body').on('submit', '#reviseForm', async function (e) {
  e.preventDefault()
  // console.log(22);
  const fd2 = new FormData(e.target)
  const files = document.querySelector('#file').files[0]
  // console.log(files);
  // if (!files) return layer.msg('请上传图片喔');
  // 把file图片文件转换成string字符串格式
  if (files) {
    const fd = new FormData()
    fd.append('file', files)
    const { data: { data: { savePath } } } = await axios.post('http://124.223.14.236:8060/admin/common/upload?type=images', fd, {
      headers: {
        'Content-Type': false,
      }
    })
    // 把图片添加进fd表单
    fd2.append('advimgsrc', savePath)
  }


  // 发送请求
  const res = await axios.post('/ydd_advimg/update', fd2)
  // console.log(res);
  reader()
  layer.msg('修改成功');
  layer.close(indexReviseForm)
})

// 点击查看大图
$('body').on('click', '#seeImg', function () {
  const advimgsrc = document.querySelector('#advimgsrc')
  // console.log(advimgsrc);
  let img = new Image();
  img.src = advimgsrc.src;
  let imgHtml = "<img src='" + advimgsrc.src + "' width='100%' height='100%'/>";
  //弹出层
  layer.open({
    type: 1,
    shade: 0.4,
    offset: 'auto',
    area: [1000 + 'px'],
    shadeClose: true,
    scrollbar: false,
    title: false, //不显示标题  
    content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
    cancel: function () {
      //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
    }
  });
})

// 添加模态框
const addForm = `
<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">*广告位</label>
  <div class="layui-input-block">
  <select class="select" name="advimgpos" style="display: block;">
  <option value="">请选择广告位</option>
</select>
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*广告图描述</label>
  <div class="layui-input-block">
  <textarea name="advimgdesc" placeholder="请输入广告图描述" lay-verify="required" class="layui-textarea"></textarea>
  </div>
</div>
<!-- 第三行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*广告图链接</label>
  <div class="layui-input-block">
    <input type="text" name="advimglink" required lay-verify="required" placeholder="请输入广告图链接" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第四行 分类别名  -->
<div class="layui-form-item addImg">
  <label class="layui-form-label">*链接图片</label>
  <div class="layui-input-block">
  <label id="files">点击上传</label>
  <input type="file" id="file" style="display: none;">
  </div>
  <div class="layui-input-block" id="seeImg" style="display: none;">
  <img src="" alt="" id="advimgsrc">
  <a href="javaScript:;">查看详情</a>
  </div>
</div>
<!-- 第五行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block-end">
  <i class="layui-btn layui-btn-primary" id="cancel2">取消</i>
    <button class="layui-btn" lay-submit lay-filter="formDemo" id='enter'>确认</button>
  </div>
</div>
</form>
`
// 模仿点击文件框
$('body').on('click', '#files', function () {
  $('#file').click()
})


//点击添加弹框
let indexAddForm          //添加文章的弹出层的index
document.querySelector('#addTo').addEventListener('click', function () {
  indexAddForm = layer.open({
    type: 1,
    title: ['客官要添加什么呢', 'font-size:22px;'],
    shade: 0.6, // 遮罩透明度
    content: addForm,
    area: ['800px', '450px']
  });
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
  // 渲染下拉框选项
  getList()
})



// 添加
// const formObj = document.querySelector('#addForm')
document.body.addEventListener('submit', async function (e) {
  // 点击添加发送请求
  if (e.target.id === 'addForm') {
    e.preventDefault()
    // console.log(22);
    const fd2 = new FormData(e.target)
    const files = document.querySelector('#file').files[0]
    // console.log(files);
    if (!files) return layer.msg('请上传图片喔');
    // 把file图片文件转换成string字符串格式
    const fd = new FormData()
    fd.append('file', files)
    const { data: { data: { savePath } } } = await axios.post('http://124.223.14.236:8060/admin/common/upload?type=images', fd, {
      headers: {
        'Content-Type': false,
      }
    })
    // 把图片添加进fd表单
    fd2.append('advimgsrc', savePath)
    // 发送请求
    const res = await axios.post('/ydd_advimg/add', fd2, {
      headers: {
        'Authorization': 'multipart/form-data'
      }
    })
    console.log(res);
    reader()
    layer.close(indexAddForm)
    layer.msg('添加成功');
  }


})




// 取消
document.body.addEventListener('click', function (e) {
  // 取消修改模态框
  if (e.target.id === 'cancel2') {
    // console.log(55);
    layer.close(indexAddForm)
    // formObj.reset()
  }
  // 取消添加模态框
  if (e.target.id === 'cancel1') {
    // console.log(55);
    layer.close(indexReviseForm)
    // formObj.reset()
  }

})



// 分页
function renderPage(total) {
  layui.use('laypage', function () {
    let laypage = layui.laypage;

    //执行一个laypage实例
    laypage.render({
      elem: 'page-box' //注意，这里的 test1 是 ID，不用加 # 号
      , count: total //数据总数，从服务端得到
      , limit: query.limit
      , curr: query.page
      , limits: [2, 3, 5, 10, 20]
      , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip']
      , jump: function (obj, first) {
        // jump的触发机制：
        // 1、分页渲染会触发回调函数
        // 2、当分页切换的时候也会触发
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        query.page = obj.curr
        query.limit = obj.limit
        //首次不执行
        if (!first) {
          //do something
          reader()
        }
      }
    });
  });

}


// 搜索请求数据
document.querySelector('#search').addEventListener('submit', function (e) {
  e.preventDefault()
  const text = document.querySelector('#btn').value.trim()
  // console.log(text);
  query.advimgdesc = text
  query.advimgpos = document.querySelector('.select').value
  // console.log(query);
  reader()
  layer.msg('搜索成功');
})


//全选框
$('#checkedAll').click(function () {
  $('.smChecked').prop('checked', $(this).prop('checked'))
})

// 小选框
$('#list').on('click', '.smChecked', function () {
  $('#checkedAll').prop('checked', $('.smChecked').length === $('.smChecked:checked').length)
})


//重置按钮
document.querySelector('#reset').addEventListener('click', function () {
  query = {
    advimgdesc: '',
    advimgpos: '',
    page: 1,
    limit: 10
  }
  reader()
  layer.msg('重置成功');
})



// 点击显示隐藏菜单
let flag1 = true
$('#pullDown').on('click', function (e) {
  e.stopPropagation()
  flag1 ? $('#menu').show() : $('#menu').hide()
  flag1 = !flag1
})
$('#menu').on('click', function (e) {
  e.stopPropagation()
  $('#menu').show()
})
// 点击页面让菜单消失
$('body').on('click', function () {
  $('#menu').hide()
  flag1 = true
})

// 点击隐藏列
$('body').on('change', '.cked', function () {
  // console.log(this.checked);
  // console.log($('#test [name="one"]'));
  this.checked ? $(`#test [name=${this.id}]`).show() : $(`#test [name=${this.id}]`).hide()
})